<template>
  <!-- 报关公司主体信息 -->
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm
          :fieldList="fieldList"
          :formOption="optionsData"
          :formData="form"
        >
          <template #queryNo="{ input, value }">
            <VBatchInput
              @update:model-value="input"
              :model-value="value"
              placeholder="请输入"
              class="w-60"
              @search="refresh"
            />
          </template>
          <template #supplier="{ input, value }">
            <el-select-v2
              :model-value="value"
              @update:model-value="input"
              :options="supplieList || []"
              placeholder="请选择供应商"
              multiple
              filterable
              clearable
              collapse-tags
              collapse-tags-tooltip
              style="min-width: 200px"
            />
          </template>
          <template #invoiceNum="{ input, value }">
            <NumberRangeSea
              :model-value="value"
              @update:model-value="input"
              placeholder="未配票数量"
              checkValue
            />
          </template>
          <template #sku="{ input, value }">
            <VBatchInput
              @update:model-value="input"
              :model-value="value"
              placeholder="请输入SKU"
              class="w-60"
              @search="refresh"
            />
          </template>
        </XForm>
      </template>
      <template #toolbar_btns>
        <VActionBar :actions="actions" />
      </template>
      <template #operation="{ row }">
        <div class="flex flex-col">
          <el-button
            link
            type="primary"
            @click="handleTax(row)"
            v-hasPermi="[exportRebatesAuthList.drawback_statistics.drawback]"
          >
            退税
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleTaxEtc(row)"
            v-hasPermi="[
              exportRebatesAuthList.drawback_statistics.customs_info,
            ]"
          >
            修改报关信息
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleLog(row)"
            v-hasPermi="[exportRebatesAuthList.drawback_statistics.log]"
          >
            日志
          </el-button>
        </div>
      </template>
    </VTable>
    <Tax
      v-model="visible"
      :id="id"
      :optionsData="optionsData"
      @close="id = null"
      @refresh="refresh"
    />
    <TaxEtc
      v-model="visibleEtc"
      :data="idEtc"
      @close="idEtc = null"
      @refresh="refresh"
    />
    <Log
      dialog
      v-model="logVisible"
      :autoLoad="false"
      tag="out.statistic-refund-tax"
      :business_id="logId"
      @close="logId = null"
    />
    <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
    <ImportDialog ref="importDialogRef" @refresh="refresh" />
  </VPage>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import XForm from "@/components/XForm/index.vue";
import Log from "@/components/Log/index.vue";
import { exportRebatesAuthList } from "@/Auth/export-rebates.js";
import Tax from "./components/Tax/index.vue";
import TaxEtc from "./components/TaxEtc/index.vue";
import DerivedCenter from "@/components/DerivedCenter/index.vue";
import { config_name } from "@/config/export.js";
import { useEnumSelect } from "@/hooks";
import { getTableSelectRow } from "@/hooks/tool.js";
import { useFetchSelect } from "@/hooks";
import { statisticTaxList } from "./api/index.js";
import { renderCustomSlot } from "@/hooks/renderTable.jsx";
import { getSupplie } from "@/api/public.js";
import NumberRangeSea from "@/components/NumberRangeSea/index.vue";
import ImportDialog from "@/components/importDialog/index.vue";
import VBatchInput from '@/componentsPublic/BatchInput/index.vue'
const { proxy } = getCurrentInstance();
const { options: optionsData } = useEnumSelect({
  params: ["out_return_tax_status"],
});
const tableRef = ref();
const tableOptins = reactive({
  formConfig: {
    data: {
      numberNo: "",
      return_tax_status: "",
      sku: "",
      dateRange: { type: "return_tax_apply_time", value: [], range: false }, // 组合+日期范围
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  rowConfig: {
    height: 160,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    {
      fixed: "left",
      title: "退税主体",
      width: 200,
      field: "return_tax_main_company_name",
    },
    { title: "供应商", fixed: "left", width: 200, field: "supplier_name" },
    { title: "部门", width: 160, field: "department_name" },
    {
      title: "头程备库单号",
      width: 260,
      field: "tc_number",
      slots: renderCustomSlot("tc_number"),
    },
    {
      title: "单号",
      width: 260,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <VText title="采购单号" value={row.purchase_number}></VText>
              <VText title="sku" value={row.sku}></VText>
              <VText title="报关单号" value={row.declare_number}></VText>
              <VText title="合同协议号" value={row.contract_number}></VText>
            </div>
          );
        },
      },
    },
    // { title: "采购单号", width: 120, field: "purchase_number" },
    // { title: "sku", width: 160, field: "sku" },
    { title: "采购含税价", width: 160, field: "goods_price" },
    // { title: "报关单号", width: 160, field: "declare_number" },
    // { title: "合同协议号", width: 160, field: "contract_number" },
    { title: "报关日期", width: 160, field: "declare_date" },
    {
      title: "预报匹配状态",
      width: 200,
      field: "dm_status_text",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <VText title="预报状态" value={row.dm_status_text}></VText>
              <VText title="退税是否确认" value={row.is_confirmed_text}></VText>
              <VText
                title="电子口岸匹配状态"
                value={row.etc_dm_status_text}
              ></VText>
            </div>
          );
        },
      },
    },
    { title: "项号", width: 80, field: "xno" },
    {
      title: "预报数据",
      // align: "center",
      minWidth: 260,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <VText title="海关编码" value={row.hs_code}></VText>
              <VText title="报关品名" value={row.declare_goods_name}></VText>
              <VText title="报关单位" value={row.declare_unit}></VText>
              <VText title="报关数量" value={row.declare_nums}></VText>
              <VText title="报关单价" value={row.declare_price}></VText>
              <VText title="报关币别" value={row.declare_currency}></VText>
              <VText title="报关总额" value={row.declare_total_amount}></VText>
            </div>
          );
        },
      },
    },
    {
      title: "电子口岸数据",
      // align: "center",
      minWidth: 260,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <VText title="海关编码" value={row.etc_hs_code}></VText>
              <VText
                title="报关品名"
                value={row.etc_declare_goods_name}
              ></VText>
              <VText title="报关单位" value={row.etc_declare_unit}></VText>
              <VText title="报关数量" value={row.etc_declare_nums}></VText>
              <VText title="报关单价" value={row.etc_declare_price}></VText>
              <VText title="报关币别" value={row.etc_declare_currency}></VText>
              <VText
                title="报关总额"
                value={row.etc_declare_total_amount}
              ></VText>
            </div>
          );
        },
      },
    },
    // {
    //   title: "电子口岸数据",
    //   align: "center",
    //   children: [
    //     { title: "海关编码", width: 160, field: "etc_hs_code" },
    //     { title: "报关品名", width: 160, field: "etc_declare_goods_name" },
    //     { title: "报关单位", width: 160, field: "etc_declare_unit" },
    //     { title: "报关数量", width: 160, field: "etc_declare_nums" },
    //     { title: "报关单价", width: 160, field: "etc_declare_price" },
    //     { title: "报关币别", width: 160, field: "etc_declare_currency" },
    //     { title: "报关总额", width: 160, field: "etc_declare_total_amount" },
    //   ],
    // },
    { title: "报关备注", width: 160, field: "declare_remark" },
    { title: "发票代码", width: 160, field: "invoice_code" },
    { title: "发票号码", width: 160, field: "invoice_number" },
    { title: "配票数量", width: 160, field: "invoice_al_nums" },
    { title: "发票不含税单价", width: 160, field: "invoice_ex_tax_price" },
    { title: "未配票数量", width: 160, field: "invoice_un_nums" },
    { title: "配票不含税金额", width: 160, field: "invoice_un_tax_amount" },
    { title: "配票税额", width: 160, field: "invoice_tax_amount" },
    { title: "供应商税点", width: 160, field: "supplier_tax_point" },
    { title: "发票行号", width: 160, field: "invoice_row_no" },
    { title: "报关费", width: 160, field: "declare_fee" },
    { title: "退税利润", width: 160, field: "return_tax_profit" },
    { title: "换汇成本", width: 160, field: "foreign_exchange_costs" },
    { title: "退税状态", width: 160, field: "return_tax_status_text" },
    { title: "退税批次", width: 160, field: "return_tax_batch" },
    { title: "退税提交时间", width: 170, field: "return_tax_apply_time" },
    {
      title: "退税到账时间",
      width: 170,
      field: "return_tax_amount_arrival_time",
    },
    {
      title: "操作人/标记时间",
      width: 170,
      field: "update_time",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <div>{row?.marking_user || "-"}</div>
              <div>{row?.marking_time || "-"}</div>
            </div>
          );
        },
      },
    },
    {
      title: "操作",
      field: "accrue_payment_amount",
      fixed: "right",
      width: 150,
      slots: { default: "operation" },
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return statisticTaxList({ ...form, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
const refresh = () => {
  tableRef?.value.query()
};
//导出中心
const DerivedCenterRef = ref();
const handleExport = async () => {
  let condition = getTableSelectRow(tableRef.value);
  DerivedCenterRef.value.open({
    tag_name: config_name["export_rebates"]["statistic_refund_tax"],
    condition,
  });
};
const importDialogRef = ref();
const handleImport = () => {
  importDialogRef.value?.open({
    type: "out.refundTaxMark",
    urlType: "/out/statistic-refund-tax/import",
  });
};
const id = ref(null);
const visible = ref(false);
const handleTax = (item) => {
  visible.value = true;
  id.value = item?.id;
};
const idEtc = ref(null);
const visibleEtc = ref(false);
const handleTaxEtc = (item) => {
  visibleEtc.value = true;
  idEtc.value = item;
};

const logId = ref(null);
const logVisible = ref(false);
const handleLog = (item) => {
  logId.value = item.id;
  logVisible.value = true;
};

const supplieList = ref([]);
const getSupplieList = async () => {
  const { data } = await getSupplie();
  let list = data.map((item) => {
    return {
      label: item.supplier_name,
      value: item.supplier_code,
    };
  });
  supplieList.value = list || [];
};
getSupplieList();

const handleBatchTaxEtc = () => {
  importDialogRef.value?.open({
    type: "out.refundTaxEtc",
    urlType: "/out/statistic-refund-tax/import-etc",
  });
};

const publicStyle = { style: { width: "300px" } };
const fieldList = [
  {
    field: "numberNo",
    selectStyle: { width: "100px" },
    select: [
      { label: "报关单号", value: "declare_number" },
      { label: "预报单号", value: "pre_no" },
      { label: "合同单号", value: "contract_number" },
      { label: "采购单号", value: "purchase_number" },
      { label: "发票号码", value: "invoice_number" },
    ],
    slot: "queryNo",
  },
  {
    field: "return_tax_main_company_name",
    type: "input",
    placeholder: "退税主体",
  },
  {
    field: "supplier_code",
    slot: "supplier",
    placeholder: "供应商",
  },
  {
    field: "invoice_un_nums",
    slot: "invoiceNum",
    placeholder: "未配票数量",
  },
  {
    field: "return_tax_batch",
    type: "input",
    placeholder: "退税批次",
  },
  {
    field: "return_tax_status",
    type: "select",
    originOption: "out_return_tax_status",
    options: {
      placeholder: "退税申报状态",
    },
    style: { width: "130px" },
  },
  {
    field: "out_dm_status",
    type: "select",
    // originOption: "out_dm_status",
    // collapseTags: true,
    // multiple: true,
    // class: "select-wrapper-style",
    options: {
      placeholder: "预报匹配状态",
      data: [
        { label: "正常", value: 1 },
        { label: "异常", value: 2 },
      ],
    },
    style: { width: "240px" },
  },
  {
    field: "etc_dm_status",
    type: "select",
    options: {
      placeholder: "电子口岸匹配状态",
      data: [
        { label: "正常", value: 1 },
        { label: "异常", value: 2 },
      ],
    },
    style: { width: "240px" },
  },
  {
    field: "sku",
    slot: "sku",
  },

  {
    field: "dateRange",
    type: "dateTimeRange",
    style: { width: "360px" },
    selectStyle: { width: "150px" },
    select: [
      { label: "退税提交时间", value: "return_tax_apply_time" },
      { label: "退税到账时间", value: "return_tax_amount_arrival_time" },
    ],
    itemProps: {
      startPlaceholder: "最早时间",
      endPlaceholder: "最晚时间",
    },
  },
];

const actions = [
  {
    label: "批量导入标记退税",
    type: "primary",
    fn: handleImport,
    permission: [exportRebatesAuthList.drawback_statistics.drawbackimport],
  },
  {
    label: "批量修改报关信息",
    type: "primary",
    fn: handleBatchTaxEtc,
    permission: [exportRebatesAuthList.drawback_statistics.customs_info],
  },
  {
    label: "导出",
    right: true,
    dkicon: "icon-Upload",
    fn: handleExport,
    permission: [exportRebatesAuthList.drawback_statistics.export],
  },
];
</script>

<style lang="scss" scoped></style>
